<template>
  <div>
    
    <!-- 聊天信息 -->
    <div class="im-list">

      <div scroll-y class="im-item" :class="(isMsg||isMoreOpt)?'pb500':''">
        <block v-for="item of chatList" :key="item.id">
          <!-- doctor -->
          <div class="item-row item-left" v-if="item.role===0">
            <div class="item-icon">
              <image
                class="item-img"
                src="/static/images/doctor.png"
                mode="aspectFill"
                lazy-load="false">
              </image>
            </div>
            <div class="item-content">
              <text selectable class="item-text">{{item.content}}</text>
            </div>
          </div>

          <!-- me -->
          <div class="item-row item-right" v-if="item.role===1">
            <div class="item-content">
              <text selectable class="item-text">{{item.content}}</text>
            </div>
            <div class="item-icon">
              <image
                class="item-img"
                src="/static/images/me.png"
                mode="aspectFill"
                lazy-load="false">
              </image>
            </div>
          </div>

        </block>
        
        <!-- 时间 -->
        <!-- <div class="date">
          <span class="text">{{date}}</span>
        </div> -->

      </div>

    </div>

    <!-- im-bar -->
    <div class="im-bar">
      <div class="content">
        <!-- 录音 -->
        <div class="bar-voice" hover-class="btn-hover" @tap="tapVoice">
          <image
            class="item-img"
            :src="isVoice?'/static/images/keyboard.png':'/static/images/voice.png'"
            mode="aspectFill"
            lazy-load="false">
          </image>
        </div>
        <!-- 输入框 -->
        <div class="bar-input" v-if="!isVoice">
          <input
            :focus="isFocus"
            class="bar-main"
            type="text"
            fixed="true"
            maxlength="140"
            cursor-spacing="4"
            confirm-type="send"
            confirm-hold="true"
            adjust-position="true"
            v-model="inputVal"
            @confirm="inputConfirm"
            @focus="focusInp"
          />
          
        </div>
        <!-- 语音 -->
        <div class="bar-input" hover-class="item-hover" v-if="isVoice">
          <div class="bar-main bar-voice-btn">按住 说话</div>
        </div>
        <!-- 常用短语 -->
        <div class="bar-face" hover-class="btn-hover" @tap="tapMsg">
          <image
            class="item-img"
            src="/static/images/msg.png"
            mode="aspectFill"
            lazy-load="false">
          </image>
        </div>
        <!-- 操作 -->
        <div class="bar-opt" hover-class="btn-hover" @tap="tapOpt">
          <image
            v-show="true"
            class="item-img"
            src="/static/images/add.png"
            mode="aspectFill"
            lazy-load="false">
          </image>
          <!-- <div v-show="!showOpt" class="opt-send" @tap="tapSend">发送</div> -->
        </div>
      </div>

      <!-- 快捷消息面板 -->
      <div class="bar-msg" v-show="isMsg">
        <div class="msg-content">
          <span
            class="msg-item"
            hover-class="btn-hover"
            v-for="(item, index) of quickMsg"
            :key="index"
            @tap="sendMessage(item)"
            >
            {{item}}
          </span>
        </div>
      </div>
      
      <!-- 更多操作 -->
      <div class="bar-more-opt" v-show="isMoreOpt">
        <div class="opt-content">
          <!-- 操作菜单 -->
          <div class="opt-item" hover-class="btn-hover">
            <image
              src="/static/images/img.png"
              mode="aspectFit"
              lazy-load="false">
            </image>
          </div>

          <div class="opt-item" hover-class="btn-hover">
            <image
              src="/static/images/file.png"
              mode="aspectFit"
              lazy-load="false">
            </image>
          </div>
          
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { formatTime } from '@/utils/index'
export default {
  computed: {
    showOpt() {
      return this.inputVal.trim() ? false : true
    }
  },
  onShow () {
    this.scrollChatToBottom() // 0
  },
  data () {
    return {
      // true显示操作按钮 false发送
      // showOpt: true,
      // 输入框获取焦点
      isFocus: false,
      // 显示语音条
      isVoice: false,
      // 显示快捷短语
      isMsg: false,
      // 显示更多操作面板
      isMoreOpt: false,
      // 输入框内容
      inputVal: '',
      date: formatTime(new Date()),
      chatList: [
        { id: 0, role: 0, dateTime:'2019-04-24 10:37:44', content: '吃药了吗？' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '吃了吧' },
        { id: 0, role: 0, dateTime:'2019-04-24 10:37:44', content: '您还没吃，我就给你吃，赶紧吃，注意饮食习惯' },
        { id: 0, role: 0, dateTime:'2019-04-24 10:37:44', content: '切忌熬夜' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '好的吧' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '谢谢您嘞' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '舍利子，色不异空，空不异色，色即是空，空即是色，受想行识亦复如是。' },
        { id: 0, role: 0, dateTime:'2019-04-24 10:37:44', content: '舍利子，是诸法空相，不生不灭，不垢不净，不增不减。是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界乃至无意识界，无无明亦无无明尽，乃至无老死，亦无老死尽，无苦集灭道，无智亦无得。' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍；无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。' },
        { id: 1, role: 1, dateTime:'2019-04-24 10:37:44', content: '三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。' },
        { id: 0, role: 0, dateTime:'2019-04-24 10:37:44', content: '故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。' },
        { id: 0, role: 0, dateTime:'2019-04-24 10:37:44', content: '故说般若波罗蜜多咒，即说咒曰：揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。' },

      ],

      // 快捷消息
      quickMsg: [ '谢谢医生', '感谢耐心指导', '头晕头痛', '胸闷发慌', '是否需要吃药']
    }
  },
  methods: {
    // 输入框聚焦滚动到底部
    focusInp (e) {
      // 延迟滚动，防止抖动
      setTimeout(this.scrollChatToBottom, 200)
    },
    // 键盘发送
    inputConfirm (e) {
      let val = e.mp.detail.value
      if (!val.trim()) {
        wx.showToast({
          title: '发送消息不能为空',
          icon: 'none',
          duration: 2000,
        });
        return false
      }
      // 发送
      this.sendMessage(val)

    },
    // 发送按钮发送
    // tapSend () {
    //   let chatObj = { id: 1, role: 1, date: formatTime(new Date()), content: this.inputVal }
    //   this.chatList.push(chatObj)
    //   this.inputVal = ''
    // },

    // 切换语音、输入框
    tapVoice () {
      this.isFocus = this.isVoice // 输入框获取焦点
      this.isVoice = !this.isVoice // 切换图标
    },
    // 切换快捷短语面板
    tapMsg () {
      this.isMsg = !this.isMsg
      this.isMsg && (this.isMoreOpt = false)
    },
    // 切换操作面板
    tapOpt () {
      this.isMoreOpt = !this.isMoreOpt
      this.isMoreOpt && (this.isMsg = false)
    },

    // 点击发送快捷消息
    tapQuickMsg (msg) {
      this.sendMessage(msg)
    },

    // 用户消息发送
    sendMessage(msg) {
      let chatObj = { id: 1, role: 1, date: formatTime(new Date()), content: msg }
      this.chatList.push(chatObj)
      this.inputVal = ''

      // 延迟滚动，防止抖动
      setTimeout(this.scrollChatToBottom, 200)
    },

    // 聊天页面滚动到底部
    scrollChatToBottom () {
      wx.createSelectorQuery().select('.im-item').boundingClientRect(rect => {
        // console.log(rect.height)
        wx.pageScrollTo({
          scrollTop: rect.height,
          duration: 300
        });
      }).exec()
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f1f1f1;
}
.pb500 {
  padding-bottom: 500rpx;
}
// im
.im-list {
  // position: fixed;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 100rpx;
  padding-bottom: 100rpx;
  width: 100%;
  .im-item {
    height: 100%;
    .item-row {
      display: flex;
      // align-items: center;
      padding: 20rpx 10rpx;
      font-size: 28rpx;
      .item-content {
        min-width: 10%;
        max-width: 75%;
        .item-text {
          display: block;
          padding: 10rpx;
        }
      }
    }
    // left
    .item-left {
      justify-content: flex-start;
      .item-content {
        background-color: #31b9fb;
        border-radius: 0 35rpx 35rpx 35rpx;
        box-shadow: 5rpx 5rpx 20rpx #31b9fb;
        .item-text {
          color: #fff;
        }
      }
    }
    // right
    .item-right {
      justify-content: flex-end;
      .item-content {
        background-color: #fff;
        border-radius: 35rpx 0 35rpx 35rpx;
        box-shadow: 0 0 20rpx #ccc;
        .item-text {
          color: #333;
        }
      }
    }
    // 时间
    .date {
      text-align: center;
      font-size: 24rpx;
      margin: 20rpx 0;
      .text {
        padding: 5rpx 10rpx;
        color: #666;
        background-color: #ddd;
        border-radius: 10rpx;
      }
    }
  }
}

// bar
.im-bar {
  
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f8f8f8;
  font-size: 28rpx;

  .content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10rpx 0;
    // input
    .bar-input {
      flex: 1;
      padding: 0 10rpx;
      background-color: #fff;
      border-radius: 10rpx;
      .bar-main {
        height: 60rpx;
        line-height: 60rpx;
      }
      .bar-voice-btn {
        
        text-align: center;
      }
    }
    .opt-send {
      color: #fff;
      background-color: #31b9fb;
      margin: 10rpx;
      padding: 6rpx 10rpx;
      border-radius: 5rpx;
    }

  }
  // 快捷消息
  .bar-msg {
    height: 500rpx;
    .msg-content {
      display: flex;
      flex-wrap: wrap;
      .msg-item {
        padding: 10rpx 20rpx;
        margin: 10rpx;
        color: #666;
        background-color: #fff;
        border-radius: 20rpx;
      }

    }
  }
  // 操作面板
  .bar-more-opt {
    height: 500rpx;
    .opt-content {
      display: flex;
      .opt-item {
        height: 100rpx;
        width: 100rpx;
        padding: 20rpx;
        margin: 20rpx;
        border: 1rpx solid #1296db;
        border-radius: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.iconfont {
  padding: 20rpx;
  font-size: 40rpx;
  color: #31b9fb;
}
.item-img {
  width: 50rpx;
  height: 50rpx;
  padding: 0 10rpx;
}
.btn-hover {
  opacity: 0.6;
}
.item-hover {
  box-shadow: inset 0 0 20rpx#31b9fb;
  color: #31b9fb;
  opacity: 0.6;
}
</style>

